<template>
  <div class="rankList" :style="{ background: 'url(' + bg.coverImgUrl + ') ' }">
    <!-- 导航栏 -->
    <div class="nav">
      <div class="left">
        <van-icon name="arrow-left" size="14" @click="goBack" />
        排行榜
      </div>
      <div class="right">
        <van-icon name="ellipsis" />
      </div>
    </div>
    <!-- 排行榜 -->
    <div class="list-top">
        <div class="list-top-box">
            <span class="list-top-left"></span>
            <div class="list-top-img">
                <img :src="bg.coverImgUrl" alt="">
            </div>
            <div class="list-top-right">
                <h2>{{bg.name}}</h2>
                <div>
                    <img src="http://p1.music.126.net/_-PWshFwqO5nFkOMpM2K4w==/109951166515653261.jpg" id="logo">
                    <h6>网易云音乐</h6>
                </div>
                <p>{{bg.description}}</p>
            </div>
        </div>
        <div class="list-top-btn">
            <van-button size="small" icon="share-o" round type="primary">分享给好友</van-button>
        </div>
    </div>
    <!-- 歌曲列表 -->
    <div class="list-bottom">
        <h2>
            <van-icon name="play-circle-o" />
            播放全部
            <span>(共{{list.length}}首)</span>
        </h2>
        <div class="list-bottom-box" v-for="(item,index) in list" :key="item.id" @click="godetail(item.id)">
            <span>{{index+1}}</span>
            <div class="list-bottom-box-left">
                <div>{{item.name}}</div>
                <div>{{item.ar[0].name}}</div>
            </div>
            <div class="list-bottom-box-right">
                <van-icon name="play-circle-o" />
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { loadCateApi } from "../../api/home";
export default {
  data() {
    return {
      img: "",
      list: [],
      bg:[],
    };
  },
  computed: {},
  watch: {},

  methods: {
    async getSongs(id) {
      const res = await loadCateApi(id);
      this.bg = res.data.playlist;
      this.list = res.data.playlist.tracks;
      console.log(this.list);
      console.log(this.bg);
    },
    goBack(){
        this.$router.go(-1);
    },
    godetail(id){
        this.$router.push(`/songdetail/${id}`)
    }
  },
  created() {
    const id = this.$route.query.id;
    this.getSongs(id);
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.nav{
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    line-height: 50px;
}
.nav .left{
    float: left;
    padding-left: 20px;
    font-size: 14px;
}
.nav .right{
    float: right;
    padding-right: 20px;
}
.rankList{
  display: flex;
  flex-direction: column;
}
.list-top{
    width: 100%;
    height: 215px;
    display: flex;
    flex-direction: column;
}
.list-top-img{
    width: 125px;
    height: 125px;
    margin-top: 20px;
}
.list-top-img img{
    width: 100%;
    border: 1px solid #cfcfcf;
    border-radius: 10px;
}
.list-top-left{
    width: 10%;
}
#logo{
    width: 28px;
    height: 28px;
    border-radius: 28px;
}
.list-top-right{
    flex: 1;
    display: flex;
    flex-direction: column;
    color: #fff;
    padding-left: 11px;
}
.list-top-right h2{
    width: 100%;
    height: 30px;
    font-size: 15px;
    margin-top: 25px;
}
.list-top-right div{
    width: 100%;
    height: 35px;
    line-height: 35px;
    display: flex;
}
.list-top-right h6{
    font-size: 12px;
    padding-left: 5px;
}
.list-top-right p{
    flex: 1;
    font-size: 10px;
    overflow: hidden;
    text-overflow:ellipsis;
}
.list-top-box{
    width: 100%;
    height: 150px;
    display: flex;
}
.list-top-btn{
    padding-top: 10px;
    text-align: center;
}
.list-bottom{
    width: 100%;
    background-color: #fff;
    min-height: 500px;
    border-radius: 30px 30px 0 0;
    display: flex;
    flex-direction: column;
}
.list-bottom h2{
    width: 90%;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
    font-size: 16px;
}
.list-bottom h2 span{
    font-size: 14px;
    color: #ccc;
}
.list-bottom-box{
    width: 85%;
    height: 60px;
    padding-left: 20px;
    display: flex;
}
.list-bottom-box span{
    text-align: center;
    width: 10%;
    line-height: 60px;
}
.list-bottom-box-left{
    width: 35%;
    line-height: 25px;
    font-size: 14px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.list-bottom-box-right{
    line-height: 60px;
    flex: 1;
    padding-left: 165px;
}
</style>
